import React from 'react'
import { List ,Tabs,Accordion,WhiteSpace,Badge} from 'antd-mobile';
import {Icon} from 'antd'
import './index.css'
import icon1 from '../../assets/images/Mine/1.png'
import icon2 from '../../assets/images/Mine/2.png'
import icon3 from '../../assets/images/Mine/3.png'
import icon4 from '../../assets/images/Mine/4.png'
import icon5 from '../../assets/images/Mine/5.png'
import icon6 from '../../assets/images/Mine/6.png'
import icon7 from '../../assets/images/Mine/7.png'
import icon8 from '../../assets/images/Mine/8.png'
import icon9 from '../../assets/images/Mine/9.png'
import icon10 from '../../assets/images/Mine/10.png'
import Axios from 'axios';
const Item = List.Item;
const Brief = Item.Brief;
const tabs = [
  { title: '私人FM',icon:icon1 },
  { title: '最新电音',icon:icon2 },
  { title: 'Sati空间',icon:icon3 },
  { title: '私藏推荐',icon:icon4 },
  { title: '亲子频道',icon:icon5 },
  { title: '古典专区',icon:icon6 },
  { title: '跑步FM',icon:icon7},
  { title: '小冰电台',icon:icon8},
  { title: '爵士电台',icon:icon9 },
  { title: '驾车模式',icon:icon10 }
];
export default class Mine extends React.Component {
  constructor(props){
    super(props);
    this.state={
      collectionSong:[],
      isBeckoning:false,
      userId:undefined
    }
  }
  componentWillMount(){
    Axios.get('http://localhost:8000/login/status?timestap='+Date.now()).then(({data})=>{
      this.setState({
        userId:data.profile.userId
      })
      Axios.get('http://localhost:8000/user/playlist?uid='+this.state.userId).then(({data})=>{
          if(data.code===200){
            this.setState({
              collectionSong:data.playlist
            })
          }
        })
    })
  }
  renderTab(tabs){
    return (<div>
        <img src={tabs.icon} style={{width:'50px',height:'50px'}} alt=''/>
        <p style={{margin:-10,fontSize:12,lineHeight:0,color:'#666'}}>{tabs.title}</p>
        </div>
    )
  }
  render() {
    return (
      <div className='Mine'>
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar renderTab={(tabs)=>this.renderTab(tabs)} {...props} page={4} />}></Tabs>
        <List>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
            onClick={() => {}}
          >本地音乐</List.Item>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
            onClick={() => {}}
          >最近播放</List.Item>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
            onClick={() => {}}
          >下载管理</List.Item>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
            onClick={() => {}}
          >我的电台</List.Item>
          <List.Item
            thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
            onClick={() => {}}
          >我的收藏</List.Item>
        </List>
        <WhiteSpace size="xs" style={{height:'6px',background:'#eee'}}/>
        <Accordion className='accordions' defaultActiveKey="0">
          <Accordion.Panel header={<div><span>创建的歌单</span><span></span></div>}>
            <List>
              {this.state.collectionSong.map((item,i)=>{
                if(i===0){
                return <Item thumb={item.coverImgUrl} extra={<Badge text={'心动模式'}
                  style={{
                    padding: '0 8px',
                    borderRadius: 20,
                    background:this.state.isBeckoning?'linear-gradient(to right,rgb(255, 92, 63) 10%,rgb(255, 66, 59) 80%)':"transparent",
                    color: this.state.isBeckoning?'#fff':'#333',
                    border:'1px solid #ccc'
                  }}
                />}
                  onClick={() => this.setState({isBeckoning:!this.state.isBeckoning})}
                >{item.name.replace('zweenng','我')} <Brief>{item.trackCount}首</Brief>
                </Item>
                }
              })}
            </List>
          </Accordion.Panel>
          <Accordion.Panel header={<div><span>收藏的歌单</span><span></span></div>} >
            <List>
              {this.state.collectionSong.map((item,i)=>{
                if(i!==0){
                  return <Item thumb={item.coverImgUrl} extra={<Icon type='more'/>}
                  onClick={() => {}}
                >{item.name} <Brief>{item.trackCount}首 by{item.creator.nickname}</Brief>
                </Item>
                }
              })}
            </List>
          </Accordion.Panel>

        </Accordion>
      </div>
    )
  }
}